@import "./tabbar";
@import "./tabbar.ios.vars";

// iOS Tabs
// --------------------------------------------------

.tabbar-ios {
  justify-content: center;

  height: $tabbar-ios-height;

  border-top: $tabbar-ios-border;
  background-color: $tabbar-ios-background-color;

  contain: strict;
}

.tabbar-ios.placement-top {
  border-top: 0;
  border-bottom: $tabbar-ios-border;
}

.tabbar-ios .tabbar-highlight {
  background: $tabbar-ios-text-color-active;
}

// iOS Translucent Tabbar
// --------------------------------------------------

.tabbar-translucent-ios {
  background-color: $tabbar-ios-translucent-background-color;

  backdrop-filter: $tabbar-ios-translucent-filter;
}

// iOS Tabbar Color Mixin
// --------------------------------------------------

@mixin tabbar-ios($color-name) {
  $color-base: ion-color($colors-ios, $color-name, base, ios);
  $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
  $color-shade: ion-color($colors-ios, $color-name, shade, ios);

  $translucent-background-color: ion-color($colors-ios, $color-name, base, ios, $tabbar-ios-translucent-background-color-alpha);

  .tabbar-ios-#{$color-name} {
    border-color: $background-ios-color-step-400;
    color: $color-contrast;
    background-color: $color-base;

    fill: $color-contrast;
  }

  .tabbar-ios-#{$color-name} .tab-button {
    color: $color-contrast;
  }

  .tabbar-ios-#{$color-name} .tab-button.focused {
    background: $color-shade;
  }

  .tabbar-ios-#{$color-name} .tab-button:hover:not(.disable-hover),
  .tabbar-ios-#{$color-name} .tab-selected {
    font-weight: bold;

    color: $color-contrast;

    fill: $color-contrast;
  }

  .tabbar-translucent-ios-#{$color-name} {
    background-color: $translucent-background-color;
  }
}

// iOS Tabbar Color Generation
// --------------------------------------------------

@each $color-name, $color-value in $colors-ios {
  @include tabbar-ios($color-name);
}
